<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //获取count
        var count=document.getElementById("count");
        //JS程序的执行速度非常快，所以循环结构无法肉眼看见变化速度
        //如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用

        //setInterval()
        //定时调用
        //可以将一个函数，每隔一段时间执行一次
        //参数
        //1.回调函数，该函数会每隔一段时间被调用一次
        //2.每次调用间隔的时间，单位是毫秒
        //返回值 返回一个Number类型的数据
        //这个数字用来作为定制器的唯一标识
        var num=0;
        var timer=setInterval(function()
        {
            count.innerHTML=num++;
            //设置关闭条件
            if(num == 21)
            {
                clearInterval(timer);
            }
        },100);

        //clearInterval()可以用来关闭一个定时器
        //方法中需要一个定时器的标识来作为参数，这样将关不表示对应的定时器

    };
    </script>
</head>
<body>
    <h1 id="count">1</h1>
</body>
</html>